<template>
  <div class="content">
    <!-- top start -->
    <div class="head">
      <myHead></myHead>
      <!-- 登陆账号信息部分 end -->
    </div>
    <!-- top start -->

    <!-- bottom start-->
    <div class="main">
      <div class="main-left">
        <myMenu></myMenu>
      </div>

      <div class="main-right">


        <!-- 导航面包屑 start -->
        <div class="main-right-top">
          <div class="navigation">

                     <!-- 标签页导航  start-->
            <div class="main-right-leftnavigation">
              <el-page-header @back="goBack" style="margin-top: 10px; margin-left: 10px;">
              <template #content>
                <span class="text-large font-600 mr-3"> {{titles}} </span>
              </template>
            </el-page-header>
              </div>
               <!-- 标签页导航  end-->


             <div style="margin-right: 10px;">
                <el-breadcrumb :separator-icon="ArrowRight" >
                <el-breadcrumb-item
                  :to="{ path: item.url }"
                  v-for="(item, index) in routes"
                  :key="index"
                  >{{ item.title }}</el-breadcrumb-item
                >
                  <!-- <el-breadcrumb-item>组织架构</el-breadcrumb-item>
                  <el-breadcrumb-item>主页</el-breadcrumb-item> -->
                </el-breadcrumb>
            </div>
          </div>
        </div>
        
        <!--导航面包屑  end-->

        <!-- 主要数据内容  start-->
        <div class="main-right-content">
          <el-scrollbar ref="scrollMenuRef" class="scrollMenuBox">
            <router-view></router-view>
          </el-scrollbar>
        </div>
        <!-- 主要数据内容  start-->
      </div>
    </div>
    <!-- bottom end-->
  </div>
</template>
<script lang="ts">
import myMenu from '../components/myMenu.vue'
import myHead from '../components/myHead.vue'
import { ArrowRight } from '@element-plus/icons-vue'
import { defineComponent, onMounted, reactive, toRefs, watchEffect } from 'vue'
import { useRoute, useRouter } from 'vue-router'

interface Data {
  routes: any[],
  titles:any
}

export default defineComponent({
  components: {
    myHead,
    myMenu
  },
  setup() {
    const router = useRouter()
    //路由对象
    const routes = useRoute()

    const data = reactive<Data>({
      routes: [],
      titles:""
    })
     
    const events = {
      goBack:()=>{
          router.back();
      },
      /**
       * 面包屑导航的内容加载
       */
      getHeadUrl: () => {
        data.routes.length = 0
        for (let i = 0; i < routes.matched.length; i++) {
          data.routes.push({
            url: routes.matched[i].meta.url,
            title: routes.matched[i].meta.title
          })
        }
        if (data.routes.length == 2) {
          data.routes.length = 1;
        }

      }
    }
    watchEffect(() => {
      //启动监听事件的时候其实已经实在渲染页面之前已经调用了一次该方法的,事件里面方法包含的对象发生改变，就会触发该方法，达到实时响应更新的效果
      events.getHeadUrl();
      data.titles=routes.meta.title;
    })

    // onMounted(() => {
    //    events.getHeadUrl();
    //   console.log(routes)
    // })
    return {
      ...toRefs(data),
      ...events,
      ArrowRight
    }
  }
})
</script>

<style  scoped>
@import '../styles/layout.css';
</style>